import React from 'react'
import 'babel-polyfill'
import {
    BrowserRouter as Router,
    Route,
    Switch,
    Link,
    useParams,
    useRouteMatch
} from 'react-router-dom'

import Home from '../component/Home'
import About from '../component/About'
import Game from '../component/Game'
import Topics from '../component/Topics'
import TopicsClass from '../component/Topics-class'

export default function App (){
    return (
        <Router>
            <div>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/game">Game</Link></li>
                    <li><Link to="/topics">Topics</Link></li>
                    <li><Link to="/topicsClass">Topics-Class</Link></li>
                </ul>
                <Switch>
                    <Route path='/about'>
                        <About/>
                    </Route>
                    <Route path='/game'>
                        <Game />
                    </Route>
                    <Route path='/topics'>
                        <Topics/>
                    </Route>
                    <Route path='/topicsClass'>
                        <TopicsClass/>
                    </Route>
                    <Route path='/'>
                        <Home/>
                    </Route>
                </Switch>
            </div>
        </Router>
    )
}
